import * as React from "react"
const { Fragment, useEffect, useState, useRef, useCallback, createRef } = React;
let fn;
const TestRef = () => {
    const [count, setCount] = useState(0);
    const [index, setIndex] = useState(1);
    const countRef = useRef();
    const refFromUseRef = useRef();
    const refFromCreateRef = createRef();
    useEffect(() => {
        countRef.current = count;
        console.log(count);
    });
    if (!refFromUseRef.current) refFromUseRef.current = index;
    if (!refFromCreateRef.current) refFromCreateRef.current = index;
    function handleAlertClick() {
        setTimeout(() => {
            alert("You clicked on : " + countRef.current);
        }, 3000);
    }
    console.log("component re-render")
    return (
        <Fragment>
            <div>
                <h2>CreateRef和UseRef的区别</h2>
                <p>Current index : {index}</p>
                <p>refFromUseRef : {refFromUseRef.current}</p>
                <p>refFromCreateRef : {refFromCreateRef.current}</p>
                <button onClick={() => setIndex(index + 1)}>Cause rerender</button>
            </div>
            <div>
                <h2></h2>
                <p>You clicked {count} times</p>
                <button onClick={() => {
                    setCount(count + 1);
                    handleAlertClick();
                }}>Click me</button>
                <button onClick={handleAlertClick}>Show alert</button>
            </div>
        </Fragment>
    )
}

export default TestRef;